<template>
	<view>

		<u-navbar :title="NavTitle" :immersive="true" :is-back="false" :background="background" :border-bottom="false">
			<view class="nav_bar u-flex">
				<image @click="Fanhui()" :src="BestImgUrl+'/PackageDetails/Group 34757.png'"></image>
			</view>
		</u-navbar>

		<view class="swpier_wrap">
			<view class="swpier_box">
				<u-swiper :list="swiperlist" height="800" @change="changeS"></u-swiper>
				<view class="indicator">{{swpierIdx+1}}/{{swiperlist.length}}</view>
			</view>
			<view class="price_box u-flex">
				<text>捡漏价</text>
				<text>¥{{toFixedTwo(packageDetails.price - packageDetails.rebate_amount)}}</text>
				<text>商品原价¥39.9，省¥30</text>
			</view>
		</view>







		<view class="details_info1">
			<view class="info_title">9.9蛋糕捡漏</view>
			<view class="info_tags">
				<u-tag text="随机搭配" type="success" size="mini" bg-color="#FEFAE0" border-color="#FEFAE0" color="#685A00" />
			</view>
			<view class="info_list">
				<view class="info_list_item u-flex">
					<text>领取须知</text>
					<view>购买捡漏后，应在当天领取</view>
				</view>
				<view class="info_list_item u-flex">
					<text>领取时间</text>
					<view>今天22:00-20:30</view>
					<view class="qxgz" @click="guize_tc_titleShow = true">取消规则</view>
				</view>
			</view>
			<view class="info_address u-flex">
				<view class="info_address_left">
					<view class="left_1 text-Omit u-flex" @click="toShopDetails()">老嫂子蛋糕店(杭州富阳店)<u-icon name="arrow-right" color="#333333" size="24"></u-icon></view>
					<view class="left_2 u-flex"><u-icon name="map" color="#666666" size="30"></u-icon><span class="text-Omit">杭州市富阳区巨利路28号</span></view>
				</view>
				<view class="info_address_right u-flex">
					<view class="right_1" @click="Daohang()">
						<image :src="BestImgUrl+'/PackageDetails/Group 34759.png'"></image>
						<view>导航</view>
					</view>
					<view class="right_1" @click="Tel()">
						<image :src="BestImgUrl+'/PackageDetails/Group 34758.png'"></image>
						<view>电话</view>
					</view>
				</view>
			</view>
		</view>


		<view class="details_info4">
			<image class="topbg" :src="BestImgUrl + '/MangHe/rhddtfmh3.png'"></image>
			<view class="buzhoutiao">
				<u-time-line>
					<u-time-line-item nodeTop="2">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node" style="background: #ffffff;">
								<!-- 此处为uView的icon组件 -->
								<u-icon :name="BestImgUrl+'/MangHe/Frame.png'" color="#fff" :size="36"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">抢购捡漏</view>
								<view class="u-order-desc">捡漏内的商品都是因生产过量而没有售卖完的食物，品质得以保障，如您有<span>忌口或过敏源</span>，请提前联系商家咨询。</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item>
						<template v-slot:node>
							<view class="u-node" style="background: #ffffff;">
								<!-- 此处为uView的icon组件 -->
								<u-icon :name="BestImgUrl+'/MangHe/Frame.png'" color="#fff" :size="36"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">到店核销</view>
								<view class="u-order-desc">您抢购成功后，商家会为您预留专属捡漏，其他用户不能抢购。如果您不能及时取走和食用，食物就浪费了，超时未取的订单<span>无法取消和退款。</span></view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item>
						<template v-slot:node>
							<view class="u-node" style="background: #ffffff;">
								<!-- 此处为uView的icon组件 -->
								<u-icon :name="BestImgUrl+'/MangHe/Frame.png'" color="#fff" :size="36"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">捡漏笔记</view>
								<view class="u-order-desc">请为这一份充满惊喜的宝盒，留下<span>您的足迹～</span></view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>

		<view class="details_info3">
			<view class="title u-flex" @click="LoookAllPJ()">用户评价(30)<span>查看全部<u-icon name="arrow-right" size="24" color="#FF4E0D"></u-icon></span></view>
			<view class="list_info_wrap">
				<uni-evaluate :list-data="evaluateList" :rate="200" @lookPingJia="lookPingJia"/>
			</view>
			<!-- <view v-else>
				<u-empty text="暂无评价" mode="favor" font-size="24" icon-size="60"></u-empty>
			</view> -->
		</view>

		<view style="height: 180rpx;"></view>
		<view class="navigation_wrap">
			<view class="navigation">
				<view class="left">
					<view class="item">
						<image :src="BestImgUrl+'/PackageDetails/Frame-2.png'"></image>
						<view class="text u-line-1">客服</view>
					</view>
				</view>
				<view class="right_buy" @click="SubOrderShow = true">
					<view class="buy">
						<view class="price">立即抢购¥9.9</view>
						<view class="yuanjia">商品原价39.9，立省30元</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 提交订单弹窗 -->
		<u-popup v-model="SubOrderShow" mode="bottom" border-radius="30" :mask-close-able="false" :closeable="true">
			<view class="SubOrder_wrap">
				<view class="popup_title">提交订单</view>
				<view class="goods_info u-flex">
					<view class="goods_img">
						<image :src="packageDetails.logo" mode="aspectFill"></image>
					</view>
					<view class="goods_name">
						<view class="shopname">{{packageDetails.name}}</view>
						<view class="info_tags">
							<u-tag text="随机搭配" type="success" size="mini" bg-color="#FEFAE0" border-color="#FEFAE0" color="#685A00" />
						</view>
						<view class="dizhizu u-flex">宽馬记·热鲜牛肉海鲜火锅(全国首店)</view>
					</view>
				</view>
				<view class="suborder_info">
					<view class="subinfo_item u-flex">
						<view>领取时间<span>杭州市富阳区巨利路28号</span></view>
						<text class="qxgz" @click="guize_tc_titleShow = true">取消规则</text>
					</view>
					<view class="subinfo_item u-flex">
						<view>领取地址<span>今天22:00-22:30</span></view>
						<text class="juli">距您13.21km</text>
					</view>
					<view class="xuxian"></view>
					<view class="subinfo_item u-flex">
						<view>商品总价</view>
						<text>¥{{packageDetails.price}}</text>
					</view>
					<view class="subinfo_item u-flex">
						<view>商品数量</view>
						<view>
							<u-number-box v-model="BuyNum" @change="valChange"></u-number-box>
						</view>
					</view>
					<view class="huaxjia">小计<text>¥{{packageDetails.price}}</text></view>
				</view>
				<view class="subBtn" @click="ToBuy()">提交订单¥{{packageDetails.price}}</view>
			</view>
		</u-popup>


		<!--抢单失败弹窗-->
		<u-popup v-model="err_tc_titleShow" mode="center" width="524" border-radius="20" :mask-close-able="false" :closeable="true">
			<view class="tc_wrap">
				<view class="tc_images" style="margin: 20rpx 0;">
					<image :src="BestImgUrlBwc + 'shopDetails/be_without.png'" mode="aspectFill"></image>
				</view>
				<view class="tc_info">
					<view>{{err_tc_title}}</view>
					<view>{{err_tc_subtitle}}</view>
				</view>
				<view class="tc_btn_box">
					<view class="lijipay1">
						<!-- #ifdef APP-PLUS || H5 -->
						<u-button hover-class="none" type="info" shape="circle" :ripple="false"
							@click="callservice()">联系客服</u-button>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<u-button hover-class="none" type="info" shape="circle" :ripple="false"
							open-type="contact">联系客服</u-button>
						<!-- #endif -->
					</view>
					<view class="lijipay">
						<u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="err_tc_titleShow = false">我知道了</u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 取消规则弹窗 -->
		<view class="qxguize_pupop">
			<u-popup v-model="guize_tc_titleShow" mode="center" width="524" border-radius="40" :mask-close-able="false" :closeable="false">
				<view class="tc_wrap tc_wrap_gz">
					<view class="tc_info_guize">
						<view class="gz_title">订单取消规则</view>
						<view class="gz_info">
							<text>1、下单后10分钟内可以取消订单；</text>
							<text>2、离截止取货时间至少3小时才能取消订单。</text>
						</view>
					</view>
					<view class="tc_info_guize">
						<view class="gz_title">捡漏说明</view>
						<view class="gz_info">
							<text>您抢购成功后，商家会为您预留专属捡漏，其他用户不能抢购。如果您不能及时取走和食用，食物就浪费了，超时未取的订单无法取消和退款。</text>
						</view>
					</view>
					<view class="tc_btn_box">
						<view class="lijipay">
							<u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="guize_tc_titleShow = false">我知道了</u-button>
						</view>
					</view>
				</view>
			</u-popup>
		</view>


	</view>
</template>

<script>
	//数据评价模拟
	import evaluateData from '@/components/xiujun-evaluate/list.js';
	import uniEvaluate from '@/components/xiujun-evaluate/uni-evaluate.vue';
	const app = getApp();
	export default {
		components: {
			uniEvaluate
		},
		data() {
			return {
				BestImgUrl: app.globalData.imgurl,
				BestImgUrlBwc: app.globalData.imgurlBwc,
				background: {
					backgroundColor: 'transparent',
				},
				NavTitle: '',
				swiperlist: [],
				swpierIdx: 0,
				package_id: '',
				packageDetails: {},
				subject: [],
				goodsData: [],

				err_tc_title: '', //抢单错误提示
				err_tc_subtitle: '', //抢单错误副标题
				err_tc_titleShow: false, //抢单错误弹窗
				SubOrderShow: false,
				guize_tc_titleShow: false,
				
				evaluateList: evaluateData,
				
				BuyNum: 1
			}
		},
		onLoad(ops) {
			this.package_id = ops.package_id
			this.GetDatails()
		},
		onShow() {

		},
		onPageScroll(e) {
			if (e.scrollTop >= 1) {
				this.background.backgroundColor = '#ffffff'
				this.NavTitle = '捡漏详情'
			} else {
				this.background.backgroundColor = 'transparent'
				this.NavTitle = ''
			}
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			toFixedTwo(val) {
				var str = Number(val).toFixed(2)
				return str;
			},
			GetDatails() {
				let that = this
				let lat = uni.getStorageSync('lat')
				let lon = uni.getStorageSync('lng')
				let CityName = uni.getStorageSync('CityName')
				let Province = uni.getStorageSync('Province')
				that.$api.getpackageDetails({
					package_id: this.package_id,
					lat: lat,
					lng: lon
				}).then(res => {
					console.log('捡漏详情', res.data.result);
					that.packageDetails = res.data.result
					that.subject = res.data.result.subject
					that.goodsData = res.data.result.goods
					that.swiperlist = res.data.result.images

				}).catch(err => {

				})
			},
			changeS(e) {
				this.swpierIdx = e
			},
			Fanhui() {
				uni.navigateBack()
			},
			ToBuy() {
				let that = this
				// that.$api.postPackageDoOrder({
				// 	shop_package_id: that.packageDetails.id
				// }).then(res => {
					//console.log('订购', res.data.result)

					let order_id = '104'//res.data.result.order_id
					let shopName = '老嫂子蛋糕店（杭州富阳店）'//that.packageDetails.name
					let price = '9.90'//that.packageDetails.price

					uni.navigateTo({
						url: '/subpackageC/pages/MH-PaymentOrders/MH-PaymentOrders?order_id=' + order_id + '&name=' + shopName + '&price=' + price
					})
				// }).catch(err => {
				// 	console.log('失败', err)
				// 	that.err_tc_titleShow = true
				// 	that.err_tc_title = err.data.result.title
				// 	that.err_tc_subtitle = err.data.result.sub_title
				// });
			},
			Daohang() {
				wx.openLocation({
					latitude: Number(this.packageDetails.latitude),
					longitude: Number(this.packageDetails.longitude),
					scale: 18,
					name: this.packageDetails.shop_name,
					address: this.packageDetails.address
				});
			},
			Tel() {
				uni.makePhoneCall({
					phoneNumber: this.packageDetails.tel, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			},
			//拉起客服
			callservice() {
				let data = uni.getStorageSync('customerServiceData')
				// #ifdef H5
				window.location.href = data.h5.url
				// #endif

				// #ifdef APP-PLUS
				let appurl = data.app.url
				uni.navigateTo({
					url: '/pages/Webview/Webview?url=' + encodeURIComponent(JSON.stringify(appurl))
				})
				// #endif
			},
			LianXiKeFu: function() {
				try {
					let data = uni.getStorageSync('customerServiceErWeima')
					console.log('客服链接', data)

					wx.openCustomerServiceChat({
						extInfo: {
							url: data.path //客服ID
						},
						corpId: data.appid, //企业微信ID
						success(res) {}
					})
				} catch (error) {
					showToast("请更新至微信最新版本")
				}
			},
			lookmyOrder() {
				uni.switchTab({
					url: '/pages/order/order'
				})
			},
			Torenzheng() {
				uni.navigateTo({
					url: '/subpackageA/pages/Certification/Certification'
				})
			},
			lookPingJia(data){
				uni.navigateTo({
					url: '/subpackageC/pages/MH-evaluateDetails/MH-evaluateDetails'
				})
			},
			LoookAllPJ(){
				uni.navigateTo({
					url: '/subpackageC/pages/All-evaluate/All-evaluate'
				})
			},
			toShopDetails(){
				uni.navigateTo({
					url: '/subpackageC/pages/MH-shopDetails/MH-shopDetails'
				})
			}








		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}
	
	.qxguize_pupop {
		
	}

	.details_info3 {
		padding: 28rpx 28rpx 28rpx 28rpx;
		background-color: #ffffff;
		border-radius: 28rpx;
		margin: 30rpx 0;

		.title {
			font-size: 30rpx;
			color: $zzy-text-color-333333;
			font-weight: bold;
			height: 54rpx;
			margin-bottom: 28rpx;
			width: 100%;
			span {
				color: #FF4E0D;
				margin-left: auto;
				font-size: 28rpx;
				font-weight: initial;
			}
		}

		.list_info_wrap {
			align-items: center;

			.list_tile {
				color: $zzy-text-color-333333;
				font-weight: bold;
				font-size: 28rpx;
				align-items: center;

				span {
					display: inline-block;
					width: 6rpx;
					height: 6rpx;
					border-radius: 200rpx;
					background-color: $zzy-text-color-999999;
					margin-right: 10rpx;
				}
			}

			.list_item {
				align-items: flex-start;
				margin-top: 12rpx;
				padding-left: 16rpx;

				text:nth-child(1) {
					font-size: 28rpx;
					color: $zzy-text-color-666666;
					flex: 1;
				}

				text:nth-child(2) {
					font-size: 28rpx;
					color: $zzy-text-color-666666;
					margin-left: auto;
				}

				text:nth-child(3) {
					font-size: 28rpx;
					color: $zzy-text-color-666666;
					font-weight: bold;
					margin-left: auto;
				}
			}
		}
	}

	.details_info2 {
		padding: 32rpx 28rpx;
		background-color: #ffffff;
		border-radius: 28rpx;
		margin: 30rpx 0;

		.title {
			width: 200rpx;
			height: 54rpx;
			margin-bottom: 28rpx;
		}

		.info_list {
			padding: 0 20rpx 20rpx 20rpx;
			margin-top: 28rpx;
			align-items: flex-start;

			view {
				color: $zzy-text-color-333333;
				font-size: 28rpx;
				font-weight: bold;
			}

			span {
				padding: 0 0 0 20rpx;
				color: $zzy-text-color-333333;
				font-size: 28rpx;
				display: inline-block;
				flex: 1;
			}
		}
	}
	
	.details_info4 {
		background-color: #ffffff;
		border-radius: 0 0 28rpx 28rpx;
		margin: 30rpx 0;
		.topbg {
			width: 100%;
			height: 138rpx;
		}
		.buzhoutiao {
			padding: 10rpx 50rpx;
			/deep/ .u-time-axis::before {
				border-left: 1px dashed #FF4E0D;
			}
		}
	}

	.details_info1 {
		padding: 32rpx 28rpx;
		background-color: #ffffff;
		border-radius: 0 0 28rpx 28rpx;

		.info_title {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 14rpx;
		}

		.info_tags {
			margin-bottom: 28rpx;
		}

		.info_list {
			.info_list_item {
				font-size: 28rpx;
				margin-bottom: 12rpx;

				.hongse {
					color: #FF4E0D;
				}

				text {
					color: $zzy-text-color-333333;
					margin-right: 10rpx;
				}

				view {
					color: $zzy-text-color-666666;
				}

				.qxgz {
					margin-left: auto;
					border-radius: 200rpx;
					background-color: #FFEDE7;
					width: 146rpx;
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;
					color: #FF4E0D;
					font-size: 28rpx;
				}
			}
		}

		.info_address {
			align-items: center;
			justify-content: space-between;
			border-radius: 28rpx;
			background-color: #F4F4F4;
			padding: 28rpx;
			margin-top: 32rpx;

			.info_address_left {
				flex: 1;

				.left_1 {
					font-weight: bold;
					font-size: 28rpx;
					align-items: center;
					-webkit-line-clamp: 1;
				}

				.left_2 {
					align-items: center;
					margin-top: 12rpx;
					color: $zzy-text-color-666666;
					font-size: 28rpx;

					.text-Omit {
						-webkit-line-clamp: 1;
					}

					.u-icon {
						margin-right: 10rpx;
					}
				}
			}

			.info_address_right {
				align-items: center;
				justify-content: center;

				.right_1 {
					text-align: center;
					flex: 1;
					margin: 0 0 0 30rpx;

					image {
						width: 56rpx;
						height: 56rpx;
						margin-bottom: 6rpx;
					}

					color: $zzy-text-color-666666;
					font-size: 22rpx;
				}
			}
		}
	}

	.nav_bar {
		padding: 0 20rpx;

		image {
			width: 56rpx;
			height: 56rpx;
		}
	}

	.swpier_wrap {
		position: relative;

		.swpier_box {
			position: relative;

			.indicator {
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 200rpx;
				text-align: center;
				color: #ffffff;
				position: absolute;
				right: 30rpx;
				bottom: 130rpx;
				z-index: 2;
				padding: 4rpx 14rpx;
				font-size: 28rpx;
			}
		}

		.price_box {
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 2;
			width: 100%;
			padding: 16rpx 30rpx 28rpx 30rpx;
			background-color: #FF4E0D;
			border-radius: 30rpx 30rpx 0 0;
			align-items: flex-end;
			color: #ffffff;

			text:nth-child(1) {}

			text:nth-child(2) {
				font-size: 55rpx;
				font-weight: bold;
				margin: 0 10rpx;
				position: relative;
				top: 8rpx;
			}

			text:nth-child(3) {}
		}
	}

	.buzhou_box {
		background-color: #FFE9C3;
		padding: 16rpx 36rpx;
		align-items: center;
		justify-content: space-between;

		.jiantou {
			width: 22rpx;
			height: 28rpx;
		}

		.buzhou_item {
			align-items: center;
			justify-content: center;
			color: #FF4E0D;
			font-size: 22rpx;

			image {
				width: 18rpx;
				height: 36rpx;
				margin-right: 6rpx;
			}
		}
	}

	.navigation_wrap {
		box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 99;
		background-color: #ffffff;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	.navigation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 16rpx 16rpx 16rpx;

		.left {
			display: flex;
			align-items: center;
			font-size: 20rpx;
			height: 88rpx;

			.item {
				margin: 0 30rpx;
				text-align: center;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

		.right_buy {
			width: 466rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FF4E0D;
			height: 88rpx;
			border-radius: 200rpx;
			text-align: center;

			.buy {
				.price {
					font-size: 32rpx;
					color: #ffffff;
					font-weight: bold;
				}

				.yuanjia {
					font-size: 20rpx;
					color: #FFBAA1;
				}
			}
		}
	}
	
	.tc_wrap_gz {
		padding: 42rpx !important;
		background-image: linear-gradient(to top, #ffffff, #FFEDE7);
	}

	.tc_wrap {
		padding: 30rpx;
		text-align: center;

		.guanyu_title {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.wenan {
			color: #999;
			margin-bottom: 20rpx;
		}

		.tc_images {
			image {
				width: 300rpx;
				height: 300rpx;
			}
		}

		.steup_info {
			text-align: left;
			margin-top: 30rpx;

			.yqoiu {
				view:nth-child(1) {
					color: #666;
				}
			}

			.yqoiu2 {
				color: #666;

				span {
					color: #FE7B20;
				}
			}
		}
		
		.tc_info_guize {
			text-align: left;
			.gz_title {
				font-weight: bold;
				margin-bottom: 28rpx;
				font-size: 36rpx;
			}
			.gz_info {
				font-size: 28rpx;
				margin-bottom: 28rpx;
				color: #333333;
			}
		}

		.tc_info {
			view:nth-child(1) {
				font-weight: bold;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			view:nth-child(2) {
				font-size: 28rpx;
				color: #999;

				span {
					color: #FF4E0D;
				}
			}

			.gif_tu {
				width: 100%;
				height: 528rpx;
				border-radius: 20rpx;
			}
		}

		.tc_btn_box {
			display: flex;
			align-items: center;
			margin-top: 36rpx;
			justify-content: center;

			.tc_btn_huise {
				flex: 1;
				margin-right: 12rpx;
				background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
				border-radius: 200rpx;
				padding: 0 0;
				height: 80rpx !important;
				line-height: 80rpx !important;
				text-align: center;
				color: #333333;
			}

			.tc_btn_huise_err {
				flex: 1;
				background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
				color: #fff;
				border-radius: 200rpx;
				padding: 0 0;
				height: 80rpx !important;
				line-height: 80rpx !important;
				text-align: center;
			}

			.lijipay1 {
				flex: 1;
				position: relative;
				width: 288rpx;
				margin: 0 20rpx 0 0;

				.u-size-default {
					height: 80rpx !important;
					line-height: 80rpx !important;
					background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
					color: #333;
					border: none !important;
				}

				.u-hairline-border:after {
					border: none !important;
				}
			}

			.lijipay {
				flex: 1;
				position: relative;
				width: 288rpx;
				margin: 0 auto;

				.u-size-default {
					height: 80rpx !important;
					line-height: 80rpx !important;
					background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
					color: #fff;
					border: none !important;
				}

				.u-hairline-border:after {
					border: none !important;
				}
			}
		}
	}

	.SubOrder_wrap {
		padding: 30rpx 30rpx 30rpx 30rpx;
		background-color: #F4F4F4;

		.popup_title {
			font-size: 36rpx;
			color: $zzy-text-color-333333;
			font-weight: bold;
			text-align: center;
			width: 100%;
			margin-bottom: 30rpx;
		}

		.subBtn {
			background-color: #FF4E0D;
			border-radius: 200rpx;
			text-align: center;
			width: 100%;
			line-height: 88rpx;
			height: 88rpx;
			font-weight: bold;
			color: #ffffff;
			font-size: 32rpx;
		}

		.suborder_info {
			padding: 20rpx 30rpx;
			border-radius: 28rpx;
			background-color: #ffffff;
			margin: 30rpx 0;
			
			.xuxian {
				border-top: 1px dashed #D9D9D9;
				margin: 40rpx 0 32rpx 0;
			}

			.subinfo_item {
				padding: 10rpx 0;
				align-items: center;
				justify-content: space-between;
				font-weight: bold;
				
				view:nth-child(1){
					font-size: 28rpx;
					span {
						color: #666666;
						font-weight: initial;
						font-size: 28rpx;
						padding-left: 16rpx;
					}
				}
				
				.qxgz {
					margin-left: auto;
					border-radius: 200rpx;
					background-color: #FFEDE7;
					width: 146rpx;
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;
					color: #FF4E0D;
					font-size: 28rpx;
				}

				.flje {
					margin-right: 8rpx;
				}

				.cs {
					color: #FF4E0D;
				}
				
				.juli {
					color: #666666;
					font-size: 28rpx;
				}

				text {
					font-weight: initial !important;
				}
			}

			.huaxjia {
				margin-top: 32rpx;
				text-align: right;
				font-size: 28rpx;
				padding: 28rpx 0 20rpx 0;
				border-top: 1px dashed #D9D9D9;

				text {
					font-size: 34rpx;
					font-weight: bold;
					color: #FF4E0D;
				}
			}
		}

		.goods_info {
			background-color: #ffffff;
			padding: 20rpx;
			align-items: center;
			border-radius: 28rpx;
			margin-top: 20rpx;

			.goods_img {
				width: 144rpx;
				height: 144rpx;

				image {
					width: 144rpx;
					height: 144rpx;
					border-radius: 16rpx;
				}
			}

			.goods_name {
				padding-left: 16rpx;
				flex: 1;

				.shopname {
					font-weight: bold;
					font-size: 30rpx;
					color: $zzy-text-color-333333;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.info_tags {
					margin-top: 6rpx;
				}

				.dizhizu {
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: $zzy-text-color-999999;
					flex: 1;
					margin-top: 18rpx;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}
		}
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 28rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
		span {
			color: #FF4E0D;
		}
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 28rpx;
	}
</style>